<template>
  <view class="back-to-top">
    <view v-if="type === 1" class="container">
      <text class="count-text">
        {{ current }}
      </text>
      <text class="line" />
      <text class="count-text">
        {{ total }}
      </text>
    </view>
    <view v-else class="container">
      <image
        class="back-img"
        src=""
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  // 当前加载了几页
  current: {
    type: Number,
    default: 0,
  },
  // 一共有多少页可以加载
  total: {
    type: Number,
    default: 0,
  },
});
const type = ref(0);
let timeout = null;

console.log(props, '@@@');

function isScroll() {
  // 如果页面正在滚动，则显示current/total
  if (type.value === 0) {
    type.value = 1;
    timeout = setTimeout(() => {
      // 过1秒之后，显示返回顶部图片
      type.value = 0;
    }, 1000);
  }
  else {
    if (timeout) {
      // 如果在1秒内，又触发了滚动事件，则清空定时器，重新计算时间
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        type.value = 0;
      }, 1000);
    }
  }
}

defineExpose({ isScroll });
</script>

<style scoped>
.back-to-top {
  /* 这里请设置100%填充满返回顶部按钮 */
  position: absolute;
  inset: 0;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 20rpx #ccc;
}

.container {
  position: absolute;
  inset: 0;

  /* #ifndef APP-NVUE */
  display: flex;
  justify-content: center;
  align-items: center;

  /* #endif */
  flex-direction: column;
}

.count-text {
  font-size: 24rpx;
  font-weight: bold;
  color: #555;
}

.line {
  width: 55rpx;
  height: 1rpx;
  background-color: #dedede;
}

.back-img {
  width: 50rpx;
  height: 50rpx;
}
</style>
